<!--
 * @Description: 
 * @Author: spicylemon
 * @Date: 2022-02-24 10:52:34
 * @LastEditors: YWY
 * @LastEditTime: 2022-03-07 10:20:21
-->
<template>
  <div>
    <!-- //这里的comment id是为了做跳转标志 -->
    <div class="publish-box publish-box1" id="comment">
      <van-field
        type="textarea"
        placeholder="输入评论"
        class="publish"
        v-model="commentMessage"
      />
      <div class="button-box">
        <van-button
          size="small"
          type="primary"
          class="publish-button publish-button1"
          @click="publishCommentButton"
          >发布</van-button
        >
      </div>
    </div>
    <div class="title">评论 <span>💡</span></div>
    <div v-if="hasComment" class="white-place"></div>
    <div class="list">
      <div class="coment" :key="comment.id" v-for="comment of comment_list">
        <div class="popover">
          <img
            class="author-head"
            :src="comment.comment_user.avatar"
            alt=""
            @click="toUserPage(comment.comment_user.id)"
          />
        </div>
        <div class="content-box">
          <div class="comment-main">
            <div class="user-box">
              <div class="user-name">
                {{ comment.comment_user.name }}
              </div>
              <div class="comment-time">
                {{ comment.comment_time }}
              </div>
            </div>
            <div class="comment-content">
              {{ comment.comment_content }}
            </div>
            <div class="interaction">
              <div class="interaction-item" @click="good(comment)">
                <i class="iconfont icon-dianzan" :class="isLike(comment)"></i
                ><span class="interaction-text">{{
                  comment.comment_good || "点赞"
                }}</span>
              </div>
              <div class="interaction-item" @click="focusPublish(comment)">
                <div v-if="!comment.isPublish">
                  <i class="iconfont icon-31pinglun"></i
                  ><span class="interaction-text">{{
                    comment.reply_list.length || "评论"
                  }}</span>
                </div>
                <div v-else class="publish-focus-button">
                  <i class="iconfont icon-31pinglun"></i
                  ><span class="interaction-text">取消回复</span>
                </div>
              </div>
            </div>
            <div class="publish-box" v-if="comment.isPublish">
              <van-field
                v-model="message"
                type="textarea"
                :placeholder="waitPerson"
                class="publish"
              />
              <div class="button-box">
                <van-button
                  size="small"
                  type="primary"
                  class="publish-button"
                  @click="publishReplyButton(comment)"
                  >发布</van-button
                >
              </div>
            </div>
          </div>
          <div class="reply-content">
            <div
              class="reply-box"
              :key="reply.id"
              v-for="reply of comment.reply_list"
            >
              <div class="popover">
                <a href="">
                  <img
                    class="comment-head"
                    :src="reply.reply_user.avatar"
                    alt=""
                  />
                </a>
              </div>
              <div class="comment-main">
                <div class="user-box">
                  <div class="user-name">
                    {{ reply.reply_user.name }}
                  </div>
                  <div class="comment-time">
                    {{ reply.reply_time }}
                  </div>
                </div>
                <div class="comment-content">
                  <span class="parent" v-if="reply.reply_parent != ''"
                    >@{{ reply.reply_parent }}</span
                  >
                  {{ reply.reply_content }}
                </div>
                <div class="interaction">
                  <div class="interaction-item" @click="good(reply)">
                    <i class="iconfont icon-dianzan" :class="isLike(reply)"></i
                    ><span class="interaction-text">{{
                      reply.reply_good || "点赞"
                    }}</span>
                  </div>
                  <div class="interaction-item" @click="focusPublish(reply)">
                    <div v-if="!reply.isPublish">
                      <i class="iconfont icon-31pinglun"></i
                      ><span class="interaction-text">{{ "回复" }}</span>
                    </div>
                    <div v-else class="publish-focus-button">
                      <i class="iconfont icon-31pinglun"></i
                      ><span class="interaction-text">取消回复</span>
                    </div>
                  </div>
                </div>
                <div class="publish-box" v-if="reply.isPublish">
                  <van-field
                    v-model="message"
                    type="textarea"
                    :placeholder="waitPerson"
                    class="publish"
                  />
                  <div class="button-box">
                    <van-button
                      size="small"
                      type="primary"
                      class="publish-button"
                      @click="publishReplyButton(comment, reply)"
                      >发布</van-button
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { computed, onBeforeMount, reactive, ref } from "@vue/runtime-core";
import ArticleVue from "../pages/Article.vue";
import {
  getComments,
  publishComment,
  publishReply,
  likeDelete,
  likeAdd,
} from "@/api/services/article.service";
import { userStore } from "@/store/userdata.js";
import { Toast } from "vant";
import { useRouter } from "vue-router";
const user = userStore();
export default {
  // 进入此页面的时候获取点赞表初始化pinia，这里主要是为了考虑样式的更新
  name: "Comment",
  props: {
    article_id: Number,
  },
  setup(props) {
    const router = useRouter();
    let comment_list = reactive([]);
    let waitPerson = ref("");
    //点赞按钮功能
    const good = function (item) {
      //这个if语句是为了检测点赞的是评论还是回复
      if (!item.reply_time) {
        if (item.comment_isGood) {
          item.comment_isGood = false;
          item.comment_good--;
          likeDelete("comment", item.id).then((res) => {
            console.log(res);
          });
        } else {
          item.comment_isGood = true;
          item.comment_good++;
          likeAdd("comment", item.id).then((res) => {
            console.log(res);
          });
        }
      } else {
        if (item.reply_isGood) {
          item.reply_isGood = false;
          item.reply_good--;
          likeDelete("comment_reply", item.id).then((res) => {
            console.log(res);
          });
        } else {
          item.reply_isGood = true;
          item.reply_good++;
          likeAdd("comment_reply", item.id).then((res) => {
            console.log(res);
          });
        }
      }
    };
    let preiousItem;
    let message = ref("");
    const focusPublish = function (item) {
      //打开当前的对话框，关闭上一个对话框，
      //如果是同一个对话框的话就不执行重复操作
      if (preiousItem != item && preiousItem) {
        preiousItem.isPublish = false;
      }
      item.isPublish = !item.isPublish;
      if (item.comment_user) {
        waitPerson.value = "回复 @" + item.comment_user.name + ":";
      } else {
        waitPerson.value = "回复 @" + item.reply_user.name + ":";
      }
      preiousItem = item;
      message.value = "";
    };
    const publishReplyButton = function (comment, reply) {
      if (message.value.length == 0) {
        Toast.fail("内容不可为空");
        return;
      }
      // comment_id, comment_reply_id, comment_reply_content, to_user_id
      if (!reply) {
        publishReply(
          comment.id,
          null,
          message.value,
          comment.comment_user.id
        ).then((res) => {
          updateComment();
        });
      } else {
        publishReply(
          comment.id,
          reply.id,
          message.value,
          reply.to_user_id
        ).then((res) => {
          updateComment();
        });
      }
      message.value = "";
    };
    let commentMessage = ref("");
    const publishCommentButton = function () {
      if (commentMessage.value.length == 0) {
        Toast.fail("内容不可为空");
        return;
      }
      publishComment(commentMessage.value, props.article_id).then((res) => {
        updateComment();
        commentMessage.value = "";
      });
    };
    const scrollToComment = function () {
      document.getElementById("comment").scrollIntoView();
      window.scrollBy(0, -100);
      return;
    };
    const getTime = function (thatTime) {
      let publishTime = {
        year: +thatTime.slice(0, 4),
        month: +thatTime.slice(5, 7),
        point: parseInt(thatTime.slice(14, 16)),
        hour: parseInt(thatTime.slice(11, 13)),
        day: +thatTime.slice(8, 10),
      };
      let date = Date.parse(thatTime);
      let now = new Date();
      let nowTime = {
        year: +now.getFullYear(),
        month: +now.getMonth() + 1,
        point: +now.getMinutes(),
        hour: +now.getHours(),
        day: +now.getDate(),
      };
      if (publishTime.year < nowTime.year) {
        return nowTime.year - publishTime.year + "年前";
      } else if (publishTime.month < nowTime.month) {
        return nowTime.month - publishTime.month + "月前";
      } else if (publishTime.day < nowTime.day) {
        return nowTime.day - publishTime.day + "天前";
      } else if (publishTime.hour < nowTime.hour) {
        console.log(publishTime.hour);
        console.log(nowTime.hour);
        return nowTime.hour - publishTime.hour + "h前";
      } else if (publishTime.point < nowTime.point) {
        return nowTime.point - publishTime.point + "m前";
      }
    };
    const updateComment = function () {
      getComments(props.article_id).then((res) => {
        let result = res.result;
        comment_list.length = 0;
        result.forEach((item) => {
          let commentObj = {
            id: item.id,
            comment_content: item.comment_content,
            comment_time: getTime(item.createdAt),
            comment_good: item.comment_good,
            comment_isGood: item.comment_isGood,
            comment_user: {
              id: item.user_id,
              avatar: item.comment_user.avatar,
              name: item.comment_user.name,
            },
            reply_list: [],
          };
          let that = item;
          that.reply_list.forEach((item) => {
            let replyObj = {
              id: item.id,
              reply_content: item.comment_reply_content,
              reply_time: getTime(item.createdAt),
              reply_isGood: item.reply_isGood,
              reply_good: item.reply_good,
              reply_user: item.from_user,
              to_user_id: item.to_user_id,
            };
            replyObj.reply_parent = item.to_user.name;
            commentObj.reply_list.push(replyObj);
          });
          comment_list.push(commentObj);
        });
      });
    };
    //跳转用户资料页面
    const toUserPage = (id) => {
      router.push({
        path: `/others/${id}`,
      });
    };
    let hasComment = ref(false);
    onBeforeMount(() => {
      updateComment();
      if (comment_list.length < 1) {
        hasComment.value = true;
      }
    });
    return {
      comment_list,
      message,
      waitPerson,
      commentMessage,
      hasComment,
      good,
      publishReplyButton,
      publishCommentButton,
      focusPublish,
      scrollToComment,
      toUserPage,
    };
  },
  computed: {
    //点赞样式
    isLike() {
      return function (item) {
        if (item.comment_time) {
          return item.comment_isGood ? "like-active" : "like";
        } else {
          return item.reply_isGood ? "like-active" : "like";
        }
      };
    },
  },
};
</script>
<style scoped>
.like {
  color: #8a919f;
}
.like-active {
  color: #1d7dfa;
}
.title {
  display: flex;
  padding-bottom: 8px;
  font-weight: 600;
  font-size: 18px;
}
.title span {
  display: block;
  margin-left: 5px;
  font-size: 20px;
}
.author-head {
  height: 40px;
  widows: 40px;
  margin-right: 12px;
  border-radius: 20px;
}
.coment {
  display: flex;
  padding: 16px 0px;
  width: 100%;
}
/* 评论用户信息 */
.user-box {
  display: flex;
  justify-content: space-between;
}
.user-name {
  font-size: 15px;
  font-weight: 600;
}
.comment-time {
  color: #8a919f;
  font-size: 14px;
}
.comment-main {
  width: 100%;
}
/* 用户评论 */
.comment-content {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
}
.content-box {
  flex: 1;
}
/* 交互 */
.interaction {
  display: flex;
  margin-top: 8px;
  font-size: 30px;
}
.interaction-item {
  margin-right: 16px;
  font-size: 14px;
  color: #8a919f;
}
.interaction-text {
  display: inline-block;
  height: 22px;
  margin-left: 5px;
  line-height: 22px;
  font-size: 14px;
}
.publish-focus-button {
  color: #1d7dfa;
}
/* 回复 */
.reply-box {
  display: flex;
  padding: 20px;
}
.reply-content {
  background-color: rgba(247, 248, 250, 0.7);
  margin-top: 10px;
}
.comment-head {
  height: 24px;
  widows: 24px;
  margin-right: 6px;
  border-radius: 12px;
}
.parent {
  color: #8a919f;
  font-size: 12px;
}
/* 发布框 */
.publish-box {
  width: 100%;
  background-color: white;
  border: 1px solid #1e80ff;
  border-radius: 4px;
}
.publish-box1 {
  border: 1px solid #9b9c9e;
  margin-bottom: 14px;
}
.publish-button {
  float: right;
  font-size: 14px;
  font-weight: 400;
  width: 30%;
}
.publish-button1 {
  width: 26%;
}
.button-box {
  /* display: flex; */
  /* justify-content: end; */
  overflow: hidden;
  position: relative;
  padding: 0 15px 15px 0;
}
.publish {
  padding: 10px 16px 0 16px;
}
.van-cell:after {
  border-bottom: none !important;
}
.white-place {
  height: 30px;
}
</style>
